<template>
  <div class="tab">
    <span
      class="tab-item"
      :class="value === i ? 'active' : ''"
      @click="tabClick(i)"
      v-for="(item, i) in movie"
      :key="item"
    >
      {{ item }}
    </span>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      movie: ['正在上映', '即将上映'],
      // tabIndex: 0,
    }
  },
  methods: {
    tabClick(i) {
      // console.log(i)
      // this.tabIndex = i
      // 通知父组件
      this.$emit('input', i)
    },
  },
}
</script>

<style>
.tab {
  display: flex;
  line-height: 35px;
}
.tab-item {
  border-radius: 10px;
  background: lightblue;
  margin: 5px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active {
  background: red;
  color: gold;
}
</style>
